<template>
    <div class="aside" ref="hw">
        <el-col :span="12">
            <el-menu router :default-active="'/Home'" collapse-transition text-color="grey" class="el-menu-vertical-demo"
                background-color="transparent" active-text-color="#fff">
                <el-submenu v-for="(item, index) in routes" :index="item.path" :key="index">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{ item.meta.title }}</span>
                    </template>
                    <el-menu-item v-for="(it, i) in item.children" :index="it.path" :key="i">{{ it.meta.title
                    }}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
    </div>
</template>

<script>
// import { routes } from "./../router"
import _ from 'lodash';
import { asyncRoutes } from "./../router/index"
export default {
    name: 'Aside',
    // props: {
    //     msg: String
    // }
    data() {
        return {
            ShowHide: false,//侧边栏是否宽度变小
            // routes: routes.filter((item, index) => !item.meta?.hidden)
            routes: []
        }
    },
    mounted() {
        this.$bus.$on('shouzhan', this.ChangeShowHide)
        this.getroutes()
    },
    updated() {

    },
    watch: { //监听的对象
        ShowHide: {
            deep: true, //深度监听设置为 true
            handler: function (newV, oldV) {
                this.$bus.$on('shouzhan', this.ChangeShowHide)
                console.log('watch中：', newV)
            }
        }
    },
    methods: {
        ChangeShowHide(msg) {
            console.log(msg + "msg44");
            this.$data.ShowHide = msg
            if (this.$data.ShowHide) {
                console.log(msg + "对的情况");
                this.$refs.hw.style.width = '30px'
                console.log(this.$refs.hw.style.width, +"ref");
            } else {
                console.log(msg + "错的情况");
                this.$refs.hw.style.width = '250px'
            }

        },
        getroutes() {
            let resultRoutes = []
            if (this.$store.state.user.user.checkedkey == '' || this.$store.state.user.user.checkedkey == null) {
                resultRoutes = asyncRoutes;
            } else {
                console.log("jiade");
                resultRoutes = this.filterRoutes(asyncRoutes, this.$store.state.user.user.checkedkey)
            }
            console.log(JSON.stringify(resultRoutes) + "luyou");
            this.$data.routes = resultRoutes.filter((item) => !item.meta?.hidden)
        },
        //对target一定要给默认值，否则报错
        filterRoutes(arr, target = []) {
            //从动态路由表里面筛选出用户路由的一级路由
            arr = _.cloneDeep(arr || [])
            let result = arr.filter((item) => target.includes(item.path))
            //动态路由表里面，有的有很多子级，有的没有子级，没有子级的直接输出，而很多子级的需要挨个与用户路由数组对照，把和用户一样的子级筛出来，其他的子级不要。
            result.map((item) => {
                return item.children = item.children && item.children.filter((ite) => target.includes(ite.path))
            })
            return result
        }


    },
}
</script>

<style scoped lang="scss">
.aside {
    ::v-deep .el-submenu__title:hover {
        background-color: #ffffff !important;
    }

    .img {
        img {
            width: 100%;
        }
    }

    width: 250px;
    height: 80vh;
    margin-top: 70px;
    overflow-y: scroll;

    .el-col {
        width: 100%;
        text-align: left;
    }



}
</style>